<template>
  <div class="text-center p-20">
    <img class="w-40 h-40" src="../assets/img/avatar1.png" alt="" srcset="" />
    <h1 class="text-5xl mt-20">三丰</h1>
    <div class="text-left mt-20 mb-20">
      <div class="mb-6 mt-6">真实姓名</div>
      <c-input v-model="info.name" />
      <div class="mb-6 mt-6">应聘岗位</div>
      <c-input
        v-model="info.jobname"
        icon="icon-mima"
        placeholder="请输入密码"
      />
      <div class="mb-6 mt-6">个人简历</div>
      <div class="upload-pdf">
        {{ percent == 100 ? "简历上传完毕" : "上传个人简历" }}
        <van-uploader accept="*" :after-read="handleUpload" />
        <van-progress
          v-show="progressShow"
          stroke-width="100%"
          color="#f2826a"
          :percentage="percent"
        />
      </div>
    </div>
    <van-button type="warning" block @click="handleUpdate">确认修改</van-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Cloud from "leancloud-storage";
import { userUpdate } from "../api/user";
import { useAccount } from "../store/user";
import { useRouter } from "vue-router";
const user = useAccount();
const info = reactive({
  name: "唐三藏",
  jobname: "功德佛",
  resume: "",
});

const percent = ref(0); //控制进度条位置
const progressShow = ref(false); //进度条显示隐藏
const getBase64 = function (
  img: any,
  callback: (arg: string | ArrayBuffer | null) => void
) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
};
const handleUpload = (arg: any) => {
  // console.log(arg);
  progressShow.value = true;
  percent.value = 10;
  getBase64(arg.file, async (base64) => {
    percent.value = 40;
    // console.log(base64); //得到pdf文件的base64编码
    const cloudFile = new Cloud.File("resume.pdf", { base64 }); //构建云资源
    percent.value = 80;
    let res: any = await cloudFile.save();
    percent.value = 100;
    setTimeout(() => {
      progressShow.value = false;
    }, 1000);
    info.resume = res.attributes.url;
    // console.log(res);
  });
};
const router = useRouter();
const handleUpdate = () => {
  console.log(info);
  let { objectId, sessionToken } = user.userInfo!;
  userUpdate(objectId, info, sessionToken).then(() => {
    //更新状态机
    let update = { ...user.userInfo!, ...info };
    user.userInfo = update;
    router.go(-1);
  });
};
</script>

<style lang="scss" scoped>
.upload-pdf {
  height: 15rem;
  border: 1px dashed #fd7753;
  line-height: 15rem;
  text-align: center;
  background-color: rgba(253, 119, 83, 0.1);
  position: relative;
  .van-uploader {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  :deep(.van-uploader__upload) {
    width: 100%;
  }
  .van-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
</style>
